<script lang='ts' setup>
import { reactive, ref, nextTick } from 'vue'
import SecurityAnonymousServiceApi from '/@/api/org/bean/security-anonymous'
import { deletePageTableSelectionDataList } from '/@/utils/api-service'
import SecurityAnonymousFormDialog from './org-security-anonymous-form-dialog.vue'
const OrgSecurityAnonymousTableRef = ref()
const SecurityAnonymousFormDialogRef = ref()

const OrgSecurityAnonymousListState = reactive({
    queryColumn: [
        { name: 'url', type: 'input', label: 'URL', placeholder: '请输入URL' }
    ],
    queryForm: { url: '' },
    /**
     * 表格选中的数据
     */
    selectionData: [] as any[],
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "microServiceName", label: "所属微服务", width: "200", showOverflowTooltip: true, type: 'link',
            linkClick: (row: any) => {
                OrgSecurityAnonymousListState.currentId = row.anonymousId
                OrgSecurityAnonymousListState.formDialogVisible = true
            }
        },
        { prop: "httpmethod", label: "HTTP方法", width: "100", columnKey: 'httpmethod', filter: { type: 'dictionary', codeItemId: 'HTTP_METHOD', filterMultiple: false } },
        { prop: "url", label: "微服务URL", showOverflowTooltip: true },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => SecurityAnonymousServiceApi.queryPage({ refCols: 'default' }, { ...params, ...OrgSecurityAnonymousListState.queryForm }),
    /**
     * 表格导出excel的方法
     */
    expData: (params: any) => SecurityAnonymousServiceApi.exportData({ refCols: 'default' }, { ...params, ...OrgSecurityAnonymousListState.queryForm }),
    /**
     * 表格选中事件
     */
    tableSelectionChange: (dataList: any[], pkList: string[]) => {
        OrgSecurityAnonymousListState.selectionData = dataList
    },
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        deletePageTableSelectionDataList(OrgSecurityAnonymousTableRef, SecurityAnonymousServiceApi)
    },
    /**
     * 新增按钮点击事件
     */
    onAddButtonClick: () => {
        OrgSecurityAnonymousListState.currentId = ''
        OrgSecurityAnonymousListState.formDialogVisible = true
    },
    /** 搜索点击事件 */
    onSearch: () => {
        nextTick(() => {
            OrgSecurityAnonymousTableRef.value.loadTable()
        })
    },
    ///// 弹窗 start //////
    formDialogVisible: false,
    currentId: '',
    updateFormDialogVisible: (val: any) => {
        OrgSecurityAnonymousListState.formDialogVisible = val
    },
    onSaveSuccess: () => {
        OrgSecurityAnonymousTableRef.value.loadTable()
        OrgSecurityAnonymousListState.formDialogVisible = false
        OrgSecurityAnonymousListState.currentId = ''
    }
    ///// 弹窗 end //////
})

defineExpose({
    getOrgSecurityAnonymousTableRef: () => OrgSecurityAnonymousTableRef.value,
    onDeleteButtonClick: () => OrgSecurityAnonymousListState.deleteTableData(),
    onAddButtonClick: () => OrgSecurityAnonymousListState.onAddButtonClick()
})

</script>
<template>
    <jxtech-page-table
        ref="OrgSecurityAnonymousTableRef"
        row-key="anonymousId"
        :table-column="OrgSecurityAnonymousListState.tableColumn"
        :load-data="OrgSecurityAnonymousListState.loadData"
        fit="full"
        @selection-change="OrgSecurityAnonymousListState.tableSelectionChange"
    >
        <template #header>
            <div class="jxtech-page-table-header-flex">
                <jxtech-search-form
                    :query-column="OrgSecurityAnonymousListState.queryColumn"
                    :query-form="OrgSecurityAnonymousListState.queryForm"
                    @handle-search="OrgSecurityAnonymousListState.onSearch"
                    :col-span="12"
                ></jxtech-search-form>
            </div>
        </template>
    </jxtech-page-table>
    <security-anonymous-form-dialog
        ref="SecurityAnonymousFormDialogRef"
        :visible="OrgSecurityAnonymousListState.formDialogVisible"
        :anonymous-id="OrgSecurityAnonymousListState.currentId"
        @update:visible="OrgSecurityAnonymousListState.updateFormDialogVisible"
        @save-success="OrgSecurityAnonymousListState.onSaveSuccess"
    ></security-anonymous-form-dialog>
</template>